<template>
  <div class="personal" v-if="flag">
    <div>
      <div class="tags">
        <p>个人中心 > {{ tags }} > {{ tagChildren }}</p>
      </div>
      <div class="box">
        <div class="nav">
          <div class="nav_header">
            <img src="../../assets/portrait_head.png" alt="" />
            <div>
              <p><i class="iconfont icon-wode_mian"></i>{{ userName }}</p>
              <p><i class="iconfont icon-dengjiguanli"></i>系统管理员</p>
            </div>
          </div>
          <div class="nav_list">
            <el-menu
              router
              :default-active="defaultActive"
              class="el-menu-vertical-demo"
              @select="handleSelect"
              unique-opened
            >
              <el-submenu v-for="item in menuList" :key="item.id" :index="item.title">
                <template slot="title">
                  <i :class="item.icon" class="iconfont"></i>
                  <span>{{ item.title }}</span>
                </template>
                <el-menu-item :index="el.path" v-for="el in item.highestRoleMenuVos" :key="el.id">
                  {{ el.title }}
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </div>
        <div class="con">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import biddManage from "./biddManage/biddManage.vue";
export default {
  // components: {
  //   biddManage,
  // },
  data() {
    return {
      defaultActive: '',
      mineRouter: [],
      tags: '',
      tagChildren: '',
      menuList: [],
      flag: true,
      userName: localStorage.getItem('userName')
    }
  },
  methods: {
    handleSelect(e, index) {
      this.mineRouter.forEach(item => {
        if (item.path == index[1]) {
          this.tagChildren = item.meta.title
        }
      })
      this.tags = index[0]
      // if (e === "材料管理") {
      //   this.$router.push("/personal/material");
      // } else if (e === "角色管理") {
      //   this.$router.push("/personal/roleManage");
      // } else if (e === "用户管理") {
      //   this.$router.push("/personal/userManage");
      // } else if (e === "各项审核") {
      //   this.$router.push("/personal/audits");
      // } else if (e === "工程管理") {
      //   this.$router.push("/personal/projectManage");
      // }
    },
    // 获取菜单
    async initMenu() {
      await this.$store.dispatch('getMenuList')
      // 递归为每个二级菜单添加path属性
      // const recursion = (item, arr) => {
      //   arr.forEach(elment => {
      //     if (Array.isArray(elment.highestRoleMenuVos)) {
      //       if (elment.highestRoleMenuVos.length > 0) {
      //         recursion(item, elment.highestRoleMenuVos)
      //       } else {
      //         if (item.meta.title === elment.title) {
      //           this.$set(elment, 'path', item.path)
      //         }
      //       }
      //     } else {
      //       if (item.meta.title === elment.title) {
      //         this.$set(elment, 'path', item.path)
      //       }
      //     }
      //   })
      // }
      // 获取个人中心所有二级菜单
      // this.$router.options.routes.forEach(item => {
      //   if (item.path == '/personal/index') {
      //     this.mineRouter = [...item.children]
      //   }
      // })
      let menulist = this.$store.state.menuList
      // 过滤出不为看板以及个人中心的菜单
      this.menuList = menulist.filter(item => {
        return item.title !== '城投公司看板' && item.title !== '个人中心'
      })
      // this.mineRouter.forEach(item => {
      //   recursion(item, this.menuList)
      // })
      // localStorage.setItem("menuRouter", JSON.stringify(this.menuList));
    }
  },
  mounted() {},
  created() {},
  beforeRouteEnter(to, from, next) {
    // 通过 `vm` 访问组件实例
    next(async vm => {
      // 进入页面前 对菜单初始化
      await vm.initMenu()
      // 设置一级菜单名称
      const fora = (arr, path) => {
        arr.forEach(item => {
          item.highestRoleMenuVos.forEach(el => {
            if (el.path === path) {
              // 一级菜单名称
              vm.tags = item.title
              // 二级菜单名称
              vm.tagChildren = el.title
            }
          })
        })
      }
      // 判断是第一次进入页面还是刷新页面

      if (to.path === '/personal/index') {
        // 设置一级菜单名称
        vm.tags = vm.menuList[0]['title']
        // 第一次进入页面跳转至用户拥有菜单权限的第一个二级菜单
        // console.log(vm.menuList[0]['highestRoleMenuVos'][0])
        next(vm.menuList[0]['highestRoleMenuVos'][0]['path'])
        // 设置二级菜单名称
        vm.tagChildren = vm.menuList[0]['highestRoleMenuVos'][0]['title']
        // 根据路由设置相应菜单默认样式
        vm.defaultActive = vm.menuList[0]['highestRoleMenuVos'][0]['path']
      } else {
        let flag = false
        // 刷新页面将重新获取的权限菜单与前往的页面做比对
        // 存在则跳转
        vm.menuList.forEach(item => {
          item.highestRoleMenuVos.forEach(el => {
            if (el.path === to.path) {
              flag = true
            }
          })
        })
        if (flag) {
          // 刷新页面设置一级菜单名称
          fora(vm.menuList, to.path)
          // 设置二级名称
          // vm.mineRouter.forEach(item => {
          //   if (item.path == to.path) {
          //     vm.tagChildren = item.meta.title
          //   }
          // })
          vm.defaultActive = to.path
        } else {
          // 不存在则跳转至默认第一个菜单
          vm.tags = vm.menuList[0]['title']
          next(vm.menuList[0]['highestRoleMenuVos'][0]['path'])
          // 设置二级菜单名称
          vm.tagChildren = vm.menuList[0]['highestRoleMenuVos'][0]['title']
          // 根据路由设置相应菜单默认样式
          vm.defaultActive = vm.menuList[0]['highestRoleMenuVos'][0]['path']
        }
      }
    })
  },
  // 子路由改变时
  async beforeRouteUpdate(to, from, next) {
    await this.initMenu()
    // console.log(to)
    const fora = (arr, path) => {
      arr.forEach(item => {
        item.highestRoleMenuVos.forEach(el => {
          if (el.path === path) {
            this.tags = item.title
            this.tagChildren = el.title
          }
        })
      })
    }
    let flag = false
    // 判断获取的新菜单存不存在前往页面
    this.menuList.forEach(item => {
      item.highestRoleMenuVos.forEach(el => {
        if (el.path === to.path) {
          flag = true
        }
      })
    })
    if (flag) {
      fora(this.menuList, to.path)
      // this.mineRouter.forEach(item => {
      //   if (item.path == to.path) {
      //     this.tagChildren = item.meta.title
      //   }
      // })
      this.defaultActive = to.path
      next()
    } else {
      this.tags = this.menuList[0]['title']
      next(this.menuList[0]['highestRoleMenuVos'][0]['path'])
      // 设置二级菜单名称
      this.tagChildren = this.menuList[0]['highestRoleMenuVos'][0]['title']
      // 根据路由设置相应菜单默认样式
      this.defaultActive = this.menuList[0]['highestRoleMenuVos'][0]['path']
    }
  }
}
</script>

<style scoped lang="less">
.nav_list {
  height: auto;
  // overflow-y: auto;
}
.personal {
  position: relative;
  background-color: #f8f8f8;
  width: 100%;
  display: flex;
  justify-content: center;
  /deep/.el-submenu {
    border-left: none !important;
    .is-active {
      border-left: 2px solid #fa7355;
      background-color: #ebebeb;
    }
  }
  /deep/ .el-submenu.is-active .el-submenu__title {
    color: #fa7355;
    .iconfont {
      color: #fa7355;
    }
    /deep/.el-submenu__icon-arrow {
      color: #fa7355 !important;
    }
  }
}
.tags {
  width: 1200px;
  height: 40px;
  display: flex;
  p {
    font-size: 14px;
    line-height: 40px;
    color: #333;
  }
}
.box {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  .nav {
    width: 185px;
    position: relative;
    height: auto;
    background-color: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);
    margin-right: 16px;
    .nav_header {
      width: 100%;
      height: 85px;
      background: url(../../assets/portrait_bg.png) no-repeat;
      background-size: 100% 85px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 43px;
      }
      div {
        color: #333;
        font-size: 14px;
        margin-left: 10px;
        width: 100px;
        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          i {
            font-size: 14px;
            margin-right: 5px;
          }
        }
      }
    }
    .el-menu {
      border: none;
    }
  }
  .con {
    width: 1000px;
    min-height: calc(100vh - 72px);
    background-color: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);
  }
}
</style>
